import { t } from 'i18next'
import { fetchGetSimpleMccInfo } from '@/api/index'
import { transSimpleMccInfo } from '@/api/index/translator'
import { fetchGetRollCallSign } from '@/api/signResult'
import { RollCallee, RollCallInfo } from '@/api/signResult/interface'
import { Avatar } from '@/components/Avatar'
import Header from '@/components/Header'
import WebRecommendBrowser from '@/components/WebRecommendBrowser'
import useInit from '@/hooks/useInit'
import useStorageEvent from '@/hooks/useStorageEvent'
import { filterMtName, getUrlParams } from '@/utils'
import { API_MEETING_PREFIX } from '@/utils/constant'
import { Button, Select, Trigger } from '@kedacom/react-next'
import { useRequest } from 'ahooks'
import { useMemo, useState, useEffect } from 'react'
import { MeetingInfo } from '../index/ManageList/interfaces/meeting'
import PopupWin from '../index/ManageList/MeetingCard/PopupWin'
import { StyledWrap } from './style'

const meetingMoid = getUrlParams('meetingMoid') ?? ''

function App() {
	const [selectVal, setSelectVal] = useState('1')
	const [meetingInfo, setMeetingInfo] = useState(new MeetingInfo())
	const [caller, setCaller] = useState<RollCallInfo[]>([])
	const [allCallee, setAllCallee] = useState<RollCallee[]>([])
	const [noPassCallee, setNoPassCallee] = useState<RollCallee[]>([])
	const [noCallCallee, setNoCallCallee] = useState<RollCallee[]>([])
	const [passCallee, setPassCallee] = useState<RollCallee[]>([])
	useStorageEvent()
	useInit()
	const options = useMemo(
		() => [
			{ label: t('全部({{num}})', { num: allCallee.length }), value: '1' },
			{ label: t('已通过({{num}})', { num: passCallee.length }), value: '2' },
			{ label: t('未通过({{num}})', { num: noPassCallee.length }), value: '3' },
			{ label: t('未点名({{num}})', { num: noCallCallee.length }), value: '4' },
		],
		[allCallee, passCallee, noPassCallee, noCallCallee]
	)
	const showListValue = useMemo(() => {
		switch (selectVal) {
			case '1':
				return allCallee
			case '2':
				return passCallee
			case '3':
				return noPassCallee
			case '4':
				return noCallCallee
			default:
				return allCallee
		}
	}, [selectVal, allCallee, passCallee, noPassCallee, noCallCallee])
	const { data: mccInfoData, loading: mccInfoLoading } = useRequest(() => fetchGetSimpleMccInfo(meetingMoid))
	const { data, loading } = useRequest(() => fetchGetRollCallSign(meetingMoid))
	useEffect(() => {
		if (data && !loading) {
			let noCall: RollCallee[] = [],
				noPass: RollCallee[] = [],
				pass: RollCallee[] = []
			if (data.roll_callee_no_call) {
				noCall = data.roll_callee_no_call.map((item) => {
					let newObj = filterMtName(item)
					newObj.callStatus = 0
					return newObj
				})
			}
			if (data.roll_callee_no_pass) {
				noPass = data.roll_callee_no_pass.map((item) => {
					let newObj = filterMtName(item)
					newObj.callStatus = 2
					return newObj
				})
			}
			if (data.roll_callee_pass) {
				pass = data.roll_callee_pass.map((item) => {
					let newObj = filterMtName(item)
					newObj.callStatus = 1
					return newObj
				})
			}
			let all = pass.concat(noPass, noCall)
			setCaller(data.roll_caller ?? [])
			setAllCallee(all)
			setNoCallCallee(noCall)
			setNoPassCallee(noPass)
			setPassCallee(pass)
		}
	}, [data, loading])
	useEffect(() => {
		if (mccInfoData && !mccInfoLoading) {
			setMeetingInfo(transSimpleMccInfo(mccInfoData))
		}
	}, [mccInfoData, mccInfoLoading])
	const handleExport = () => {
		// 导出点名签到表
		// window.location.href = MEETING_JUMP_URL + '/mcc/exportRollcallSign?meetingMoid=' + meetingMoid
		window.location.href = API_MEETING_PREFIX + `/mcc/${meetingMoid}/roll_call/sign/export`
	}
	return (
		<>
			<WebRecommendBrowser />
			<Header />
			<StyledWrap className="sign-result-wrap">
				<div className="header">
					<div className="left-wrap">
						<span className="title">{`[${meetingInfo.meetingResourceVO.name ?? t('192方')}] ${
							meetingInfo.subject
						}`}</span>
						<Trigger popup={<PopupWin meetingMoid={meetingMoid} />} popupPlacement="bottomStart">
							<span className="detail-btn">{t('详情')}</span>
						</Trigger>
					</div>
					<Button onClick={handleExport}>{t('导出')}</Button>
				</div>
				<div className="callers">
					<div className="label">{t('点名人')}</div>
					<div className="callersList">
						{caller.map((item) => (
							<div key={item.mt_key}>{item.name}</div>
						))}
					</div>
				</div>
				<div className="sign-list-wrap">
					<div className="list-header">
						<div className="title">{t('被点名人列表')}</div>
						<Select
							options={options}
							value={selectVal}
							onChange={(e, v) => {
								setSelectVal(v)
							}}
						/>
					</div>
					<div className="sign-list">
						{showListValue.map((item) => (
							<div className="sign-list-item" key={item.mt_key}>
								<div className="name-wrap">
									<div className="avatar">
										<Avatar
											value={{
												accountType: item?.account_type ?? 1,
												portrait: item?.portrait,
												isOnline: item?.online ? true : false,
											}}
											size={24}
										></Avatar>
										<span
											className={`${
												item.callStatus === 2
													? 'no-pass'
													: item.callStatus === 1
													? 'pass'
													: 'hidden'
											}`}
										></span>
									</div>
									<span className="name">{item.name}</span>
								</div>
								{!!item.remark && (
									<div className="remark" title={item.remark}>
										{t('备注：')}
										{item.remark}
									</div>
								)}
							</div>
						))}
					</div>
				</div>
				<div className="mcc-footer"></div>
			</StyledWrap>
		</>
	)
}
export default App
